<template>
  <div class="Login">
    <div class="left">
      <div class="left-img">
        <img src="/src/assets/images/logo.png" alt="" />
        <span>慧教云</span>
      </div>
    </div>
    <div class="right">
      <div class="rightForm">
        <el-form
          ref="form"
          :model="formData"
          status-icon
          :rules="rules"
          size="large"
        >
          <el-form-item>
            <span style="font-weight: 600; font-size: 25px">教师登录</span>
          </el-form-item>
          <el-form-item name="username" prop="username">
            <el-input
              v-model="formData.username"
              @keyup.enter="handleLogin"
              placeholder="请输入用户名"
            />
          </el-form-item>
          <el-form-item name="password" prop="password">
            <el-input
              @keyup.enter="handleLogin"
              v-model="formData.password"
              placeholder="请输入密码"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              size="large"
              @Click="handleLogin"
              class="btn"
              type="primary"
            >
              立即登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, h } from 'vue'
import { reqTeacherLogin } from '@/api/teacher'
import { getTime } from '@/utils/time'
import useTeacherStore from '@/store/modules/teacher'
import { useRouter } from 'vue-router'

const router = useRouter()
const teacherStore = useTeacherStore()

// 获取表单信息
const form = ref()
// 登录的表单数据
const formData = ref({
  username: '',
  password: '',
})

// 整个表单的效验规则
// 1. 非空校验 required: true    message消息提示    trigger触发效验的时机 blur-失焦时触发 change-数据变化时触发
// 2. 长度校验 min: XX, max: XX
// 3. 正则校验 pattern: 正则规则    \S 非空字符
// 4. 自定义校验
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 2, max: 10, message: '用户名必须是 2-10位 的字符', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      pattern: /^\S{6,15}$/,
      message: '密码必须是 6-15位 的非空字符',
      trigger: 'blur',
    },
  ],
}

// 点击登录按钮
const handleLogin = async () => {
  await form.value.validate()

  const res = await reqTeacherLogin(formData.value)

  if (res.code === 200) {
    teacherStore.token = res.data
    router.push('/')
    ElNotification({
      title: 'Title',
      message: h(
        'span',
        { style: 'color: teal' },
        `${getTime()}好，欢迎使用慧教云`,
      ),
    })
  }
}
</script>

<style lang="scss" scoped>
.Login {
  height: 100vh;
  display: flex;

  & > .left {
    position: relative;
    width: 50%;
    height: 100%;
    background: url('/src/assets/images/login_bg.jpg') no-repeat center;
    background-size: cover;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;

    & > .left-img {
      position: absolute;
      right: 15%;
      bottom: 45%;
      display: flex;
      align-items: center;

      img {
        width: 80px;
        height: auto;
        margin-right: 10px;
      }

      span {
        color: #fff;
        font-size: 30px;
        font-family: STXingkai;
      }
    }
  }

  & > .right {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    & > .rightForm {
      width: 60%;
      padding: 50px 20px;
      border-radius: 20px;

      .btn {
        margin-top: 30px;
        width: 100%;
      }

      .ant-input {
        margin-left: 5px;
        font-size: 14px;
      }
    }
  }
}
</style>
